<style lang="scss" scoped>
    .upload-box{
        position: relative;
        width: 310px; height: 310px;
        background: #fff;
    }

    .upload-input{
        position: absolute;
        width: 100%; height: 100%;
        left: 0; top: 0;
        z-index: 10;
        background: transparent;
        opacity: 0;
        border: none;
    }

    .upload-img{
        position: absolute;
        width: 100%; height: 100%;
        left: 0; top: 0;
    }

    .upload-btn{
        position: absolute;
        width:80px;
        height:35px;
        background:rgba(57,184,102,1);
        font-size:12px; color: #fff;
        line-height: 35px; text-align: center;
        border-radius:2px;
        right: 10px; bottom: 10px;
    }

    .upload-text{
        position: absolute;
        width: 100%; color:rgba(48,54,65,1);
        line-height:17px;
        text-align: center;
        top: 330px;
        font-size: 12px;
    }
</style>

<template>
    <div class="upload-box">
        <input type="file" class="upload-input" @change="change">
        <img :src="src" class="upload-img" v-if="src">
        <button class="upload-btn">设置图片</button>
        <div class="upload-text">310px * 310px</div>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        methods: {
            change (e) {
                this.$emit('upload', e)
            }
        },
        props: {
            src: {
                type: [String],
                default: ''
            }
        }
    }
</script>
